import React, { useState, useEffect } from 'react';
import { Table, Button, Tag, Popconfirm, message } from 'antd';
import { getChargeApi, updateChargeApi } from '../../../apis/gen/genAPI';
import Search from '../../../components/charge/Search';

export default function ChargeApply() {
  const [data, setData] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  useEffect(() => {
    getCharge();
  }, []);
  const getCharge = async () => {
    const res = await getChargeApi();
    setData(res.data.rows);
    console.log(res.data.rows);
  };
  const updateCharge = async (data) => {
    const res = await updateChargeApi(data);
    // console.log(res);
    if (res.status == 200) {
      message.success('修改成功');
      // getCharge()
    }
  };
  const updateChar = (values) => {
    const {
      shopName,
      tel,
      address,
      idCard,
      managerName,
      licenceNo,
      licenceImg,
      idCardImg,
      status,
      id,
    } = values;
    // if(status=='通过'){
    //   status = '拒绝'
    // }else if(status=='拒绝'){
    //   status = '通过'
    // }
    const data = {
      shopName,
      tel,
      address,
      idCard,
      managerName,
      licenceNo,
      licenceImg,
      idCardImg,
      status,
      id,
    };
    updateCharge(data);
    // console.log(data);
  };
  const columns = [
    {
      title: '充电站名称',
      key: 'shopName',
      dataIndex: 'shopName',
    },
    {
      title: '手机号码',
      key: 'tel',
      dataIndex: 'tel',
    },
    {
      title: '地址',
      key: 'address',
      dataIndex: 'address',
    },
    {
      title: '身份证号',
      key: 'idCard',
      dataIndex: 'idCard',
    },
    {
      title: '负责人',
      key: 'managerName',
      dataIndex: 'managerName',
    },
    {
      title: '执照号',
      key: 'licenceNo',
      dataIndex: 'licenceNo',
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
    },
    {
      title: '执业照片',
      key: 'licenceImg',

      render: (tag) => (
        <img
          src={tag.licenceImg}
          style={{ width: '50px', height: '50px' }}
          alt=""
        />
      ),
    },
    {
      title: '操作',
      key: '6',
      fixed: 'right',
      width: 100,
      render: (tag) => (
        <Button
          onClick={() => {
            updateChar(tag);
          }}
          type="primary"
        >
          修改状态
        </Button>
      ),
    },
  ];
  const onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys);
  };
  const onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
      <Search></Search>
      <Table
        pagination={{
          defaultCurrent: 1,
          defaultPageSize: 5,
          pageSizeOptions: [5, 10],
          showSizeChanger: true,
        }}
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        onChange={onChange}
      />
    </div>
  );
}
